<template>
  <div class="bg">
    <div id="logo">BYDCAR</div>
    <div id="login">
       <el-card class="box-card">
         <!-- <h2>比亚迪王朝后台管理系统</h2> -->
          <div id="form">
                  <h2>比亚迪王朝后台管理系统</h2>
            <el-input class="bing" v-model="username" placeholder="请输入账号" prefix-icon="el-icon-user">
             </el-input>
            <el-input placeholder="请输入密码" v-model="password" show-password prefix-icon="el-icon-lock"></el-input>
              <Vcode :show="isShow" @success="success" @close="close" />
              <button type="primary" @click="submit();loginData()" class="btn">登录</button>
              <!-- submit(); -->
            <!-- <span @click="register" class="reg">前往注册</span> -->
          </div>
       </el-card>
    </div>
     <div id="clock">
        <div id="time">{{time}}</div>
        <div id="date">{{date}}</div>
    </div>
     <div id="copyright">Copyright © byd名徽,ALL Right Reserved</div>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data () {
    return {
        username: '',
        password: '',
        time:"",
        date:"",
        isShow:false,
    };
  },
   components: {
    Vcode
  },
   mounted() {
      window.addEventListener('keydown',this.keyDown);
      this.$nextTick(()=>{
        setInterval(this.update_clock,1000);
      })
    },
  methods: {
     loginData(){
        console.log(this.username,this.password)
        const url="http://localhost:9000/carlogin"
        const params=`username=${this.username}&password=${this.password}`
        console.log('params:',params)

        this.axios.get(url,{params: {username: this.username, password: this.password}}).then(res=>{
          console.log(res)
           if(this.username == '') {
    this.isShow =false;
        this.$message.error('用户名不能为空');
      }else if(this.password == '') {
         this.isShow =false;
        this.$message.error('密码不能为空');
      }else if(res.data.code==200){
             setTimeout(()=>{
            //2.跳转到首页
            this.$router.push({
                path: '/Layout/homes',
                query: {
                username: this.username
              },
            })
              },4000)
          }else{
             this.isShow =false,
             this.$alert('用户名或密码错误', '登录失败', {
              confirmButtonText: '确定',
              // callback: action => {
              //   this.username = '',
              //   this.password = ''
              // }
            })
            .catch(err=>{
               this.isShow =false,
            console.log("登录失败" + err);
        });
          }
        })
      },
    keyDown(e){
        //如果是回车则执行登录方法
      if(e.keyCode == 13){
         this.isShow = true;
        this.loginData();
      }
},
    destroyed(){
        window.removeEventListener('keydown',this.keyDown,false);
  },
  submit() {
      this.isShow = true;
    },
    // 用户通过了验证
    success(msg) {
      this.isShow =false; // 通过验证后，需要手动隐藏模态框
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
    },
     update_clock:function(e){
        var d=new Date();
        var year=d.getFullYear();
        if(year<10){
          year="0"+year;
        }
        var mon=d.getMonth();
         if(mon<10){
          mon="0"+mon;
        }
        var day=d.getDate();
         if(day<10){
          day="0"+day;
        }
        var hour=d.getHours();
         if(hour<10){
         hour="0"+hour;
        }
        var minute=d.getMinutes();
         if(minute<10){
          minute="0"+minute;
        }
        var second=d.getSeconds();
        if(second<10){
            second="0"+second;
        }
        this.time=hour+":"+minute+":"+second;
        this.date=year+"/"+mon+"/"+day;
      },
    register() {
      this.$router.push('/register')
    }
  }
}
</script>

<style>
.bg {
   user-select: none;
  position: fixed;
  height: 100%;
  width:100%;
  top:0;
  left:0;
   /* background-image: linear-gradient(
    90deg,
    #12b4ff,
        #4a08e4
  ); */
  background: url('../../public/images/byd_bg.jpg') no-repeat;
  background-size: 110%;
  animation: myanimation 15s infinite;
}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}
#logo{
  color:#fff;
  font-size:45px;
  font-weight: 800;
  /* 全部大写 */
  text-transform: uppercase;
  position: absolute;
  top:15%;
  left:15%;
}
 #login {
   position: absolute;
  top:30%;
  left:38%
  }
 .el-card{
  width:373px;
  height: 270px;
  background-color: rgba(255, 255,255,0.2);
  border-radius: 5px;
}

.btn{
 cursor: pointer;
  border-radius: 5px;
  background-color: #000;
  color:#fff;
   display:block;
  margin:0 auto;
  width: 80px;
  height: 40px;
  margin-top: 10px;
}
#form{
  line-height:60px;
  padding-left:15px;
  padding-right:15px;
}
#form h2{
  text-align: center;
  color:#fff;
}
#clock{
  color:#fff;
  position: absolute;
  top:70%;
  left:15%;
  text-align: left;
}
#time{
  font-size:100px;
}
#date{
  font-size: 35px;
}
#copyright{
  color:#fff;
  position: absolute;
  top:95%;
  left:40%;
}
.el-input__inner{
  background: rgba(0, 0,0,0);
color: #fff;
}
.el-input__inner:hover{
  color:#fff;
}

</style>